body,
html {
  margin          : 0;
  background-color: rgb(212, 212, 212);
  overflow        : hidden;
  position        : absolute;
  width           : 100%;
  height          : 100%;
}

.page-cover {
  position  : absolute;
  left      : 0;
  top       : 0;
  height    : 100vh;
  width     : 100vw;
  transition: all 0.5s ease;
}

.page {
  width           : 100%;
  min-height      : 300px;
  opacity         : 1;
  position        : absolute;
  left            : 0;
  top             : 50%;
  background-color: #fff;
  transform       : translate(0, -50%);
  display         : flex;
  color           : #222;
  box-shadow      : 0 20px 40px rgb(202, 202, 202);
  padding         : 30px;
  box-sizing      : border-box;

  flex-direction : row;
  align-items    : center;
  justify-content: center;

}


.page .cover {
  display        : flex;
  flex-direction : row;
  align-items    : flex-start;
  justify-content: center;
}

.page>*,
.page .cover>* {
  margin: 10px;
}

.page>.title {
  font-size  : 3em;
  font-weight: 600;
}

.page .sub-title {
  font-size  : 2em;
  font-weight: 400;
}

.page .card {
  padding        : 30px;
  display        : flex;
  border-radius  : 5px;
  box-shadow     : 0 2px 5px rgb(163, 163, 163);
  align-items    : center;
  justify-content: center;
  min-width      : 120px;
  min-height     : 120px;
  font-size      : 1.5em;
  font-weight    : 100;
  user-select    : none;
  cursor         : pointer;
}

.scroll-bar {
  position     : absolute;
  z-index      : 100;
  right        : 3px;
  top          : 0;
  width        : 10px;
  border-radius: 5px;
  background   : transparent;
  border       : 1px solid #fff;
  box-shadow   : 0 0 5px #1890ff;
  box-sizing   : border-box;
  user-select  : none;
}

.column {
  flex-direction : column !important;
  justify-content: center;
  align-items    : center;
}